<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="shortcut icon" href="#"/>
    <link href="/godance/layui/src/css/layui.css" rel="stylesheet">
    <link href="/godance/js/My_css.css" rel="stylesheet">
    <script src="/godance/layui/src/layui.js"></script>
    <script src="/godance/js/jquery-3.4.1.js"></script>
    <script src="/godance/js/My_js.js"></script>
    <script src="/godance/js/Search.js"></script>
    <script src="/godance/js/date.js"></script>
    <style type="text/css">
        .sspan {
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <!-- 水平导航 -->
    <ul class="layui-nav layui-bg-blue">
        <!-- 导航的子项 -->
        <li class="layui-nav-item">
            <label class="layui-form-label"><img src="/godance/image/GoDance_Loge.png" width="100"/></label>
            <div id="auto"></div>
            <p id="pp" style="display: none">
            <p>
        </li>

        <!-- 导航的子项 -->
        <li class="layui-nav-item">
            <div class="layui-input-inline" style="position:relative;width:450px;left:10px">  <!--块 -->
                <!-- 输入框 -->
                <input id="word" type="text" name="title" required lay-verify="required" placeholder="请输入查询内容"
                       autocomplete="off" class="layui-input"/>
            </div>
        </li>

        <li class="layui-nav-item">
            <button id="button" class="layui-btn layui-btn-normal" style="position:relative;left:10px">
                <i class="layui-icon">&#xe615;</i>搜索
            </button>
        </li>
        <li class="layui-nav-item">
            <div class="layui-input-inline" style="position:relative;width:150px;left:10px">  <!--块 -->
                <!-- 输入框 -->
                <input id="Not_See" type="text" name="title" required lay-verify="required" placeholder="请输入屏蔽内容"
                       autocomplete="off" class="layui-input"/>
            </div>
        </li>

        <li id="datetime" class="layui-nav-item">
            <a>时间过滤器</a>
            <dl class="layui-nav-child">
                <dd><a id="equals" href="#">某个时间点数据</a></dd>
                <dd><a id="big" href="#">大于某个时间点的数据</a></dd>
                <dd><a id="small" href="#">小于某个时间点的数据</a></dd>
                <dd><a id="interval" href="#">某个区间的数据</a></dd>
            </dl>
        </li>

        <button style="display: none" class="layui-btn" id="date1">日历</button>

        <li class="layui-nav-item" style="left:75px">
            <a id="collection">收藏夹</a>
            <dl class="layui-nav-child">
                <dd><a id="add_collection" href="#">增加收藏夹</a></dd>
                <dd><a id="delete_collection" href="#">删除收藏夹</a></dd>
                <dd><a id="add_child" href="#">增加收藏内容</a></dd>
                <dd><a id="delete_child" href="#">删除收藏内容</a></dd>
                <dd><a href="#">--------------------</a></dd>
                <div id="child_bag">
                </div>
            </dl>
        </li>

        <!-- 导航的子项 -->
        <li class="layui-nav-item" style="left:100px">
            <!--img中放图像 -->
            <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
            <!--二级菜单-->
            <dl class="layui-nav-child">
                <dd><a id="login" href="#">登录</a></dd>
                <dd><a href="/godance/Register.html">注册</a></dd>
                <dd><a href="/godance/delete.html">删除账户</a></dd>
                <dd><a id="get_out" href="#">退出</a></dd>
            </dl>
        </li>
    </ul>

    <br/>
    <br/>
    <!--搜索结果展示界面-->
    <div style="margin-left: 100px">
        <h1><b id="not_result"></b></h1>
        <div>
            <h3><h5 id="rid1"></h5><a onclick="See_all('1')" id="result11"></a></h3>
            <h5 id="result12"></h5> <h6 id="result13"></h6></div>
        <br/><br/>
        <div>
            <h3><h5 id="rid2"></h5><a onclick="See_all('2')" id="result21"></a></h3>
            <h5 id="result22"></h5> <h6 id="result23"></h6></div>
        <br/><br/>
        <div>
            <h3><h5 id="rid3"></h5><a onclick="See_all('3')" id="result31"></a></h3>
            <h5 id="result32"></h5> <h6 id="result33"></h6></div>
        <br/><br/>
        <div>
            <h3><h5 id="rid4"></h5><a onclick="See_all('4')" id="result41"></a></h3>
            <h5 id="result42"></h5> <h6 id="result43"></h6></div>
        <br/><br/>
        <div>
            <h3><h5 id="rid5"></h5><a onclick="See_all('5')" id="result51"></a></h3>
            <h5 id="result52"></h5> <h6 id="result53"></h6></div>
        <br/><br/>
        <div>
            <h3><h5 id="rid6"></h5><a onclick="See_all('6')" id="result61"></a></h3>
            <h5 id="result62"></h5> <h6 id="result63"></h6></div>
        <br/><br/>
        <div>
            <h3><h5 id="rid7"></h5><a onclick="See_all('7')" id="result71"></a></h3>
            <h5 id="result72"></h5> <h6 id="result73"></h6></div>
        <br/><br/>
        <div>
            <h3><h5 id="rid8"></h5><a onclick="See_all('8')" id="result81"></a></h3>
            <h5 id="result82"></h5> <h6 id="result83"></h6></div>
        <br/><br/>
        <div>
            <h3><h5 id="rid9"></h5><a onclick="See_all('9')" id="result91"></a></h3>
            <h5 id="result92"></h5> <h6 id="result93"></h6></div>
        <br/><br/>
        <div>
            <h3><h5 id="rid10"></h5><a onclick="See_all('10')" id="result101"></a></h3>
            <h5 id="result102"></h5><h6 id="result103"></h6></div>
    </div>

    <br/><br/><br/>
    <!--相关搜索-->
    <div id="located" style="display:none" class="layui-col-md4 layui-col-md-offset1">
        <div>
            <h3 style="color: #8fd3f4">相关搜索 : </h3>
            <button style="width: 150px" onclick="Dotest('1');" type="button" class="layui-btn layui-btn-normal">
                <i class="layui-icon">&#xe615;</i> <a id="text1"></a>
            </button>
            <button style="width: 150px" onclick="Dotest('2');" type="button" class="layui-btn layui-btn-normal">
                <i class="layui-icon">&#xe615;</i> <a id="text2"></a>
            </button>
            <br/>
            <button style="width: 150px" onclick="Dotest('3');" type="button" class="layui-btn layui-btn-normal">
                <i class="layui-icon">&#xe615;</i> <a id="text3"></a>
            </button>
            <button style="width: 150px" onclick="Dotest('4');" type="button" class="layui-btn layui-btn-normal">
                <i class="layui-icon">&#xe615;</i> <a id="text4"></a>
            </button>
            <br/>
            <button style="width: 150px" onclick="Dotest('5');" type="button" class="layui-btn layui-btn-normal">
                <i class="layui-icon">&#xe615;</i> <a id="text5"></a>
            </button>
            <button style="width: 150px" onclick="Dotest('6');" type="button" class="layui-btn layui-btn-normal">
                <i class="layui-icon">&#xe615;</i> <a id="text6"></a>
            </button>
            <br/>
            <button style="width: 150px" onclick="Dotest('7');" type="button" class="layui-btn layui-btn-normal">
                <i class="layui-icon">&#xe615;</i> <a id="text7"></a>
            </button>
            <button style="width: 150px" onclick="Dotest('8');" type="button" class="layui-btn layui-btn-normal">
                <i class="layui-icon">&#xe615;</i> <a id="text8"></a>
            </button>
            <br/>
            <button style="width: 150px" onclick="Dotest('9');" type="button" class="layui-btn layui-btn-normal">
                <i class="layui-icon">&#xe615;</i> <a id="text9"></a>
            </button>
            <button style="width: 150px" onclick="Dotest('10');" type="button" class="layui-btn layui-btn-normal">
                <i class="layui-icon">&#xe615;</i> <a id="text10"></a>
            </button>
            <br/>
        </div>
        <br/>
        <div id="page"></div>
    </div>
</div>
</body>
</html>

<script type="text/javascript">
    $(function () {
        //索引名称
        index1 = "essay"

        $("#collection").mouseover(function () {
            var token = localStorage.getItem('token');
            $.ajax({
                url: "collection",
                headers: {
                    "Authorization": "Bearer " + token
                },
                dataType: "json",
                type: "get",
                success: function (result) {
                    if (result.code == 201) {
                        layer.msg("收藏夹为空 请创建新的收藏夹", {icon: 6, time: 2000})
                    } else if (result.code == 200) {
                        $.each(result, function (i, n) {
                            if (i == "names") {
                                for (var j = 0; j < n.length; j++) {
                                    if (j == 0) {
                                        $("#child_bag").empty();
                                    }
                                    var name = n[j]
                                    $("#child_bag").append("<dd align=\"center\">" +
                                        "<div  class=\"dropdown\">\n" +
                                        "    <button onclick='get_child(\"" + name + "\"," + j + ");'>" + n[j] + "</button>\n" +
                                        "    <div id='child" + j + "' class=\"content\">\n" +
                                        "    </div>\n" +
                                        "</div>" +
                                        "</dd>"
                                    );
                                }
                            }
                        })
                    } else {
                        layer.msg("未登录 请登录", {icon: 5, time: 2000})
                    }
                }
            })
        })

        $("#add_collection").click(function () {
            layui.use('layer', function () {
                var layer = layui.layer;
                /** layer.open 会返回当前层索引 它是诸如layer.close(index)等方法的必传参数。如果ayer.close(index)等方法
                 *  在layer.open 中 默认index 为该当前层索引
                 * */
                var index = layer.open({
                    type: 2,
                    title: '增加收藏夹',
                    maxmin: true,
                    skin: 'layui-layer-lan',
                    shadeClose: true, //点击遮罩关闭层   就是点击旁白关闭
                    area: ['400px', '280px'],
                    /**在默认状态下，layer是宽高都自适应的
                     但当你只想定义宽度时，你可以 area: '500px'，高度仍然是自适应的
                     当你宽高都要定义时，你可以 area: ['500px', '300px']*/
                    content: 'http://localhost:9090/godance/add_collection.html',//弹框显示的url,对应的页面
                });
            })
        })

        $("#delete_collection").click(function () {
            layui.use('layer', function () {
                var layer = layui.layer;
                /** layer.open 会返回当前层索引 它是诸如layer.close(index)等方法的必传参数。如果ayer.close(index)等方法
                 *  在layer.open 中 默认index 为该当前层索引
                 * */
                var index = layer.open({
                    type: 2,
                    title: '删除收藏夹',
                    maxmin: true,
                    skin: 'layui-layer-lan',
                    shadeClose: true, //点击遮罩关闭层   就是点击旁白关闭
                    area: ['400px', '280px'],
                    /**在默认状态下，layer是宽高都自适应的
                     但当你只想定义宽度时，你可以 area: '500px'，高度仍然是自适应的
                     当你宽高都要定义时，你可以 area: ['500px', '300px']*/
                    content: 'http://localhost:9090/godance/delete_collection.html',//弹框显示的url,对应的页面
                });
            })
        })

        $("#add_child").click(function () {
            layui.use('layer', function () {
                var layer = layui.layer;
                /** layer.open 会返回当前层索引 它是诸如layer.close(index)等方法的必传参数。如果ayer.close(index)等方法
                 *  在layer.open 中 默认index 为该当前层索引
                 * */
                var index = layer.open({
                    type: 2,
                    title: '增加收藏夹内容',
                    maxmin: true,
                    skin: 'layui-layer-lan',
                    shadeClose: true, //点击遮罩关闭层   就是点击旁白关闭
                    area: ['400px', '280px'],
                    /**在默认状态下，layer是宽高都自适应的
                     但当你只想定义宽度时，你可以 area: '500px'，高度仍然是自适应的
                     当你宽高都要定义时，你可以 area: ['500px', '300px']*/
                    content: 'http://localhost:9090/godance/add_child.html',//弹框显示的url,对应的页面
                });
            })
        })

        $("#delete_child").click(function () {
            layui.use('layer', function () {
                var layer = layui.layer;
                /** layer.open 会返回当前层索引 它是诸如layer.close(index)等方法的必传参数。如果ayer.close(index)等方法
                 *  在layer.open 中 默认index 为该当前层索引
                 * */
                var index = layer.open({
                    type: 2,
                    title: '删除收藏夹内容',
                    maxmin: true,
                    skin: 'layui-layer-lan',
                    shadeClose: true, //点击遮罩关闭层   就是点击旁白关闭
                    area: ['400px', '280px'],
                    /**在默认状态下，layer是宽高都自适应的
                     但当你只想定义宽度时，你可以 area: '500px'，高度仍然是自适应的
                     当你宽高都要定义时，你可以 area: ['500px', '300px']*/
                    content: 'http://localhost:9090/godance/delete_child.html',//弹框显示的url,对应的页面
                });
            })
        })
    })

    get_child = function (value, index) {
        var token = localStorage.getItem('token');
        $.ajax({
            url: "bag_child",
            headers: {
                "Authorization": "Bearer " + token
            },
            data: {
                "name": value,
            },
            dataType: "json",
            type: "get",
            success: function (result) {
                if (result.code == 200) {
                    $("#child" + index).empty();
                    $.each(result, function (i, n) {
                        if (i == "children") {
                            for (var j = 0; j < n.length; j++) {
                                if (j == 0) {
                                    $("#child" + index).empty()
                                }
                                $("#child" + index).append("<a href='http://localhost:9090/godance/see_all.html?id="+n[j].href+"\'>" + n[j].title +"</a>")

                            }
                        }
                    })
                } else {
                    layer.msg("未登录 请登录", {icon: 5, time: 2000});
                }
            }
        })
    }
    Open = function (href) {
        window.location.href = href;
    }

    Dotest = function (value) {
        var search = $("#text" + value).html()
        $("#word").val(search)
        $("#Not_See").val("")
        Dosearch();
    }

    Dosearch = function () {
        if (first != "") {
            date_all = first + date1
        } else {
            date_all = ""
        }
        $("#auto").hide();
        var search_name = $("#word").val();
        var Not_search = $("#Not_See").val();
        $.ajax({
            url: "search_final",
            data: {
                "search": search_name,
                "not_see": Not_search,
                "index": index1,
                "pagesize": 10,
                "curpage": 1,
                "datetime": date_all,
            },
            dataType: "json",
            type: "get",
            success: function (data) {
                $("#not_result").html("")
                for (var i = 1; i <= 10; i++) {
                    $("#result" + i + "1").val("")
                    $("#result" + i + "1").html("")
                    $("#result" + i + "2").html("")
                    $("#result" + i + "3").html("")
                }
                if (data.totalcount == 0) {
                    $("#not_result").html("抱歉 没有找到与 " + $("#word").val() + "相关的网页")
                    return
                }
                for (var i = 1; i <= 10; i++) {
                    var text = "";
                    if (data.related[i - 1].length > 7) {
                        text = data.related[i - 1].slice(0, 7)
                    } else {
                        text = data.related[i - 1]
                    }
                    $("#text" + i).html(text)
                }
                for (var i = 1; i <= data.results.length; i++) {
                    $("#result" + i + "1").val(data.results[i - 1].id)
                    $("#result" + i + "1").html(data.results[i - 1].title)
                    $("#result" + i + "2").html(data.results[i - 1].introduction)
                    $("#result" + i + "3").html(data.results[i - 1].date)
                    $("#rid" + i).html('[' + data.results[i - 1].id + ']')
                }
                // 加载laydate模块
                layui.use('laypage', function () {
                    var laypage = layui.laypage;
                    laypage.render({
                        elem: 'page',
                        count: data.totalcount, //数据总数，从服务端得到
                        groups: 5, // 连续出现的页码个数
                        layout: ['prev', 'page', 'next'], // 自定义排版
                        //limits: [5, 10, 20], // layout属性设置了limit值，可会出现条数下拉选择框
                        jump: function (obj, first) {
                            //当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）
                            // obj包含了当前分页的所有参数，比如：
                            console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                            console.log(obj.limit); //得到每页显示的条数
                            //首次不执行
                            if (!first) {
                                $.ajax({
                                    url: "search_final",
                                    data: {
                                        "search": search_name,
                                        "not_see": Not_search,
                                        "index": index1,
                                        "pagesize": 10,
                                        "curpage": obj.curr,
                                        "datetime": date_all,
                                    },
                                    dataType: "json",
                                    type: "get",
                                    success: function (result) {
                                        for (var i = 1; i <= 10; i++) {
                                            var text = ""
                                            if (result.related[i - 1].length > 7) {
                                                text = result.related[i - 1].slice(0, 7)
                                                console.log(text)
                                            } else {
                                                text = result.related[i - 1];
                                            }
                                            $("#text" + i).html(text)
                                            $("#result" + i + "1").val("")
                                            $("#result" + i + "1").html("")
                                            $("#result" + i + "2").html("")
                                            $("#result" + i + "3").html("")
                                        }
                                        for (var i = 1; i <= result.results.length; i++) {
                                            $("#result" + i + "1").val(result.results[i - 1].id)
                                            $("#result" + i + "1").html(result.results[i - 1].title)
                                            $("#result" + i + "2").html(result.results[i - 1].introduction)
                                            $("#result" + i + "3").html(result.results[i - 1].date)
                                            $("#rid" + i).html('[' + result.results[i - 1].id + ']')
                                        }
                                    }
                                })
                            }
                        }
                    });
                });
                $("#located").css("display", "")
            }
        })
    }
    See_all = function (value) {
        window.location.href = 'http://localhost:9090/godance/see_all.html?id=' + $("#result" + value + "1").val();
    }
</script>
